// import { Grid } from 'antd-mobile';
import React from 'react'
import './Recommend.css'
import { withRouter } from 'react-router-dom';

// const data = Array.from(new Array(9)).map((_val, i) => ({
//   icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
//   text: `name${i}`,
// }));


class GridExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: new Array(9),
      moveDate: [],
      show: false,
      src: '',
      movieTop: 0,
      loadShow: true,
    }
    this.moveList2 = React.createRef();

    fetch('http://106.12.79.128:666/personalized?limit=9').then(res => res.json())
      .then(
        res => {
          // console.log(res.result);
          this.setState({ data: res.result })
        }
      )  //id,name,picUrl

    fetch('http://106.12.79.128:666/top/mv?limit=6').then(res => res.json())
      .then(
        res => {
          this.setState({ moveDate: res.data })
        }
      )  //id,name,picUrl
    // console.log(props);
    this.ois = () => {
      let flag = false;
      return (index, id, url) => {
        if (!flag) {
          fetch(url).then(res => res.json())
            .then(res => {
              // console.log(res.data.brs['1080']);
              this.setState({ src: '' + res.data.brs['1080'] });
              // console.log(this.moveList2.current.clientHeight)
              // console.log(index * this.moveList2.current.clientHeight);
              let height = +window.getComputedStyle(this.moveList2.current).height.replace('px', '') + +(window.getComputedStyle(this.moveList2.current).paddingBottom.replace('px', ''))
              // console.log(window.getComputedStyle(this.moveList2.current).height)
              // console.log(height)
              // console.log(window.getComputedStyle(this.moveList2.current).paddingBottom)
              this.setState({ show: true, movieTop: index * height + 'px' })
            })
          setTimeout(() => {
            flag = false;
          }, 1000)
        }
        flag = true;
      }
    }

    this.ois2 = () => {
      let flag = false;
      let page = 3;
      return (index, id, url) => {
        if (!flag) {
          // console.log(1111);
          // setTimeout(() => {
          //   flag = false;
          // }, 1000)
          if (page >= 10) {
            flag = true;
            this.setState({ loadShow: false})
          } else {
            let offset = '&offset=' + ++page;
            // console.log(page);
            fetch('http://106.12.79.128:666/top/mv?limit=6' + offset).then(res => res.json())
              .then(
                res => {
                  // console.log(res.data);
                  this.setState({ moveDate: [...this.state.moveDate, ...res.data] });
                  flag = false;
                }
              )
          }

        }
        flag = true;
      }
    }

    this.getMv = this.ois();

    this.moveList = React.createRef()
    let getMv = this.ois2()
    window.onscroll = () => {
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      let screenHeight = window.screen.height;
      let offsetHeight = document.documentElement.offsetHeight;
      // console.log(window.screen.height, scrollTop, document.documentElement.offsetHeight);
      if ((offsetHeight - scrollTop - screenHeight) < 10) {
        getMv()
      }
    }

  }
  handlerClick(index, id) {
    // console.log(111)
    // console.log(index,id);
    this.getMv(index, id, 'http://106.12.79.128:666/mv/detail?mvid=' + id);
    // console.log(this.moveList.current);
    // document.getElementsByClassName('move-data'+index)[0].appendChild(this.moveList.current)
    // console.log(document.getElementsByClassName('move-data'+index));

  }
  handerClickList(id){
    this.props.history.push('/playlist?id='+id)
  }
  render() {
    // console.log(this.state.src,111);
    return (
      <div>
        <div className='recommend-title'>推荐歌单</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between' }}>
          {this.state.data.map((item) => {
            return (
              <div className='recommend-list' key={item.id} style={{ position: 'relative' }} onClick={this.handerClickList.bind(this,item.id)}>
                <img className='recommend-list-img' src={item.picUrl} />
                <div className='recommend-list-text'>{item.name}</div>
                <div className='recommend-list-playcount' style={{ position: "absolute" }}>{item.playCount > 10000 ? Math.round(item.playCount / 10000) + '万' : item.playCount}</div>
              </div>
            )
          })}
        </div>
        <div>
          <div className='move-title'>推荐MV</div>
          <div style={{ position: 'relative' }} className='move-container'>
            {this.state.moveDate.map((item, index) => {
              return (
                <div className='move-list' key={index} style={{ position: 'relative' }} ref={this.moveList2}>
                  <div className='move-data' style={{ position: 'relative' }}>
                    <img className='move-list-img' src={item.cover} onClick={this.handlerClick.bind(this, index, item.id)} />

                  </div>
                  <div className='move-list-text'>{item.name}</div>
                  <div className='move-play-img' onClick={this.handlerClick.bind(this, index, item.id)}></div>
                  <div className='move-list-playcount'>{item.playCount > 10000 ? Math.round(item.playCount / 10000) + '万' : item.playCount}</div>
                </div>
              )
            })}
            <video controls style={{ display: !this.state.show ? 'none' : 'block', position: 'absolute', top: this.state.movieTop, left: '0' }} src={this.state.src} autoPlay className='move-list-move' ref={this.moveList}>
              您的设备不支持 video 标签，无法播放。
            </video>
          </div>
        </div>
        <div className='move-remind'>
          <div className='move-loading' style={{ display: !this.state.loadShow ? 'none' : 'block'}}>努力加载中...</div>
          <div className='move-end' style={{ display: this.state.loadShow ? 'none' : 'block'}}>已经全部加载完毕啦!</div>
        </div>
      </div>
    )
  }
  // return (
  //   <div style={{ background: 'transparent' }}>
  //     <div className="sub-title">推荐歌单 </div>
  //     <Grid data={data} columnNum={3}
  //     // hasLine={false}
  //     />
  //   </div>
  // );
}

export default withRouter(GridExample);